import React, { Component } from 'react';
import { Button, Form, Input, Spin, notification } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import {connect} from 'react-redux'

// 引入自定义操作
import { AdminLogoutSaga, AdminLoginSaga } from '../../../../redux/actions/admin';


// 用户登录表单
class AdminLoginForm extends Component {
    onFinish = (values: any) => {
        console.log('Received values of form: ', values);
        // 进入saga进行登录请求
        this.props.AdminLoginSaga(values)
    };


    render () {
      const {LoginState} = this.props
      return (
        <div>  
          <Form
            name="normal_login"
            className="login-form"
            initialValues={{ remember: true }}
            onFinish={this.onFinish}
          >
            <Form.Item
              name="admin_username"
              rules={[{ required: true, message: '请输入您的账号' }]}
            >
              <Input 
                  prefix={<UserOutlined className="site-form-item-icon" />} 
                  placeholder="账号" 
                  allowClear={true}   
              />
            </Form.Item>
            <Form.Item
              name="admin_password"
              rules={[{ required: true, message: '请输入您的密码' }]}
            >
              <Input.Password
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="密码"
                // allowClear={true}  
              />
            </Form.Item>
            <Spin spinning={LoginState.spinning} tip="登录中......">
              <Form.Item>
                <Button type="primary" htmlType="submit" className="login-form-button">
                  登录
                </Button>
              </Form.Item>
            </Spin>
            </Form>
        </div>
      );
    };
  }

  export default connect(
    state => ({
        LoginState: state.LoginReducer.login,
        UserLoginState: state.PublicReducer.userLoginState
      }),
      {
          AdminLoginSaga
      }
  )(AdminLoginForm)